<template>
    <div id="detail">
        <detail-nav-bar class="detail-nav" @titleClick="titleClick" ref="nav"></detail-nav-bar>
        <scroll class="content" ref="scroll" :probe-type="3" @scroll="contentScroll">
            <detail-swiper :top-images="topImages"></detail-swiper>
            <detail-base-info :goods-info="goodsInfo"></detail-base-info>
            <detail-shop-info :shop-info="shopInfo"></detail-shop-info>
            <detail-goods-info :detail-info="detailInfo" @imageLoad="imageLoad"></detail-goods-info>
            <detail-param-info ref="params" :param-info="paramInfo"></detail-param-info>
            <detail-comment-info ref="comment" :comment-info="commentInfo"></detail-comment-info>
            <goods-list ref="recommend" :goods="getRecommend"></goods-list>
        </scroll>
        <back-top @click.native="backClick" v-show="isShowBackTop"></back-top>
        <detail-bottom-bar @addToCart="addToCart"></detail-bottom-bar>
    </div>
</template>

<script>
    import DetailNavBar from './childcomps/DetailNavBar'
    import DetailSwiper from './childcomps/DetailSwiper'
    import DetailBaseInfo from './childcomps/DetailBaseInfo'
    import DetailShopInfo from './childcomps/DetailShopInfo'
    import DetailGoodsInfo from './childcomps/DetailGoodsInfo'
    import DetailParamInfo from './childcomps/DetailParamInfo'
    import DetailCommentInfo from './childcomps/DetailCommentInfo'
    import DetailBottomBar from './childcomps/DetailBottomBar'

    import Scroll from 'components/common/scroll/Scroll'
    import GoodsList from 'components/content/goods/GoodsList'

    import {getDetail,GoodsInfo,ShopInfo,GoodsParam,getRecommend} from 'network/detail'
    import {itemImgListenerMixin,backTopMixin} from 'common/mixin'

    import {mapActions} from 'vuex'

export default {
    name: 'Detail',
    components: {
        DetailNavBar,
        DetailSwiper,
        DetailBaseInfo,
        DetailShopInfo,
        DetailGoodsInfo,
        DetailParamInfo,
        DetailCommentInfo,
        DetailBottomBar,
        Scroll,
        GoodsList,
    },
    mixins: [itemImgListenerMixin,backTopMixin],
    data() {
        return {
            id: null,//商品id
            topImages: [],//顶部轮播图
            goodsInfo: {},//商品信息
            shopInfo: {},//店铺信息
            detailInfo: {},//商品详情数据
            paramInfo: {},//参数信息
            commentInfo: {},//评论信息
            getRecommend: [],
            themeTopYs: [],//存放顶部导航标题切换的高度临界点的值，（例如滚动到商品参数时，让对应的标题高亮）
            currentIndex: 0//
        }
    },
    created() {
        // 传入的id
        this.id = this.$route.params.id
        getDetail(this.id).then(res => {
            const data = res.result;
            // 获取顶部轮播图
            this.topImages = data.itemInfo.topImages
            // 获取商品信息
            this.goodsInfo = new GoodsInfo(data.itemInfo, data.columns, data.shopInfo.services)
            // 创建店铺信息
            this.shopInfo = new ShopInfo(data.shopInfo)
            // 保存商品详情数据
            this.detailInfo = data.detailInfo
            // 保存参数信息
            this.paramInfo = new GoodsParam(data.itemParams.info, data.itemParams.rule)
            // 保存评论信息
            if(data.rate.list) {
                this.commentInfo = data.rate.list[0]
            }
        })

        // 请求推荐数据
        getRecommend().then(res => {
            this.getRecommend = res.data.list
        })
    },
    mounted() {
        /*********mixin代码块********* */

            //itemImgListenerMixin图片加载处理

         /*********mixin代码块********* */
    },
    destroyed() {
        // 取消全局事件监听（mixin图片加载处理）
        this.$bus.$off('itemImageLoad',this.itemImgListener)
    },
    methods: {
        /*********mixin代码块********* */

            //backTopMixin回到顶部

         /*********mixin代码块********* */

        ...mapActions(['addCart']),//vuex中addCart方法放入methods



        // 图片加载完毕后给themeTopYs数组push各组件距离顶部的高度
        imageLoad() {
            this.$refs.scroll.refresh();
            this.themeTopYs = [];
            this.themeTopYs.push(0);
            this.themeTopYs.push(this.$refs.params.$el.offsetTop);
            this.themeTopYs.push(this.$refs.comment.$el.offsetTop);
            this.themeTopYs.push(this.$refs.recommend.$el.offsetTop);
            console.log(this.themeTopYs);
        },

        //点击标题滚动到相对应区域
        titleClick(index) {
            console.log(index);
            this.$refs.scroll.scrollTo(0,-this.themeTopYs[index])
        },

        // 接收来自scroll组件的position
        contentScroll(position) {
            // console.log(position)
            let positionY = -position.y;
            let length = this.themeTopYs.length;
            for(let i=0;i<length;i++) {
                // 以当前位置做判断哪个标题高亮
                if(this.currentIndex !== i && ((i<length-1 && positionY>=this.themeTopYs[i] && positionY<this.themeTopYs[i+1]) || (i===length-1 && positionY>=this.themeTopYs[i]))) {
                    this.currentIndex = i;
                    this.$refs.nav.currentIndex = this.currentIndex
                    console.log(i)
                }
            }
            this.listenShowBackTop(position);//（mixin回到顶部）
        },
        addToCart() {
            // 获取购物车需要展示的信息
            const product = {};
            product.image = this.topImages[0];
            product.title = this.goodsInfo.title;
            product.desc = this.goodsInfo.desc;
            product.price = this.goodsInfo.realPrice;
            product.id = this.id;
            console.log(product)
            // this.$store.commit('addCart',product)

            // dispath可以返回promise
            // this.$store.dispatch('addCart',product).then(res => {
            //     console.log(res)
            // })

            // 添加至购物车并弹窗
            this.addCart(product).then(res => {
                this.$toast.show(res,2000)
            })

        }
    }
}
</script>

<style scoped>
    #detail {
        position: relative;
        z-index: 9;
        background-color: #fff;
        height: 100vh;
    }

    .detail-nav {
        position: relative;
        z-index: 9;
        background-color: #fff;
    }

    .content {
        height: calc(100% - 44px - 49px);
    }
</style>